<template>
	<view class="container">
		<view class="status_bar"></view>
		<view class="head flex-row">
			<view class="left" @click="goBack"><uni-icons type="arrowleft" size="24" color="#333"></uni-icons></view>
			<view class="center flex-row tabs">
				<view @click="toggleTab(0)" class="tab" :class="{active: tabIndex == 0}">
					<text>今日巡检</text>
					<view class="tip">1</view>
				</view>
				<view @click="toggleTab(1)" class="tab" :class="{active: tabIndex == 1}">
					<text>月待巡检</text>
					<view class="tip">2</view>
				</view>
				<view @click="toggleTab(2)" class="tab" :class="{active: tabIndex == 2}">
					<text>月执行详情</text>
					<view class="tip">96</view>
				</view>
			</view>
			<view class="right"></view>
		</view>
		<view class="body">
			<view v-show="tabIndex == 2" class="count flex-row">
				<view>月任务:{{ count.allmis }}</view>
				<view>按期:{{ count.do_in_time }}</view>
				<view>超期:{{ count.out_time }}</view>
				<view>完成率:<text>{{ count.do_rate }}%</text></view>
			</view>
			<scroll-view v-if="list.length" scroll-y="true" class="scroll" :class="{full: tabIndex < 2}">
				<view class="card" v-for="(item, index) in list" :key="index">
					<view v-if="tabIndex == 2" class="flex-row">
						<view class="left">
							<view class="name">巡检名称：{{ item.title || '无' }}</view>
							<view class="time">巡检时间：{{ item.check_time || '无' }}</view>
							<view class="time">截至时间：{{ item.last_day || '无' }}</view>
						</view>
						<view v-if="item.zhuangtai == 'outlimit'" class="right flex-column">
							<image class="user small" src="../../static/img/risk/uncheck.png"></image>
							<text class="outtime">已超期</text>
						</view>
						<view v-if="item.zhuangtai == 'othercheck'" class="right flex-column">
							<image class="user small" src="../../static/img/risk/checked.png"></image>
							<text class="outtime">已巡检</text>
						</view>
					</view>
					
					<view v-else class="flex-row">
						<view class="left">
							<view class="name">巡检名称：{{ item.title || '无' }}</view>
							<view class="time">巡检周期：{{ item.cycle || '无' }}</view>
							<view class="time">起始时间：{{ item.from_day || '无' }}</view>
							<view class="time">截至时间：{{ item.last_day || '无' }}</view>
						</view>
						<view class="right flex-column">
							<image class="user" src="../../static/img/risk/uncheck.png"></image>
							<text class="uncheck">未巡检</text>
						</view>
					</view>
					<view v-if="tabIndex < 2">请按时巡检，安全生产！</view>
				</view>
				<view class="nodata">没有更多了~</view>
			</scroll-view>
			<view v-else class="nodata">没有更多了~</view>
		</view>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue';
const YEAR_LENGTH = 4;	// 连续显示的年份数量,5年
export default{
	components: { uniIcons },
	data(){
		return {
			tabIndex: 0,
			userid: '',
			count: {
				allmis: 0,
				do_in_time: 0,
				out_time: 0,
				do_rate: 0
			},
			list: []
		}
	},
	onLoad(option){
		this.userid = option.id;
		this.getData();
	},
	methods: {
		goBack(){
			uni.navigateBack();
		},
		// 跳转
		toPage(url){
			uni.navigateTo({url});
		},
		// 切换tab
		toggleTab(index){
			this.tabIndex = index;
		},
		// 获取数据
		getData(){
			let _this = this;
			uni.showLoading({
				title: '加载中'
			});
			uni.request({
				url: _this.$API.dangerTask,
				header: _this.$API.get_head(),
				data: {userid: this.userid},
				success: (res)=>{
					uni.hideLoading();
					let allmis = res.data.data.tongji.allmis;
					if(allmis > 0){
						_this.count.do_rate = Number.parseInt((res.data.data.tongji.do_in_time / allmis) * 100);
					}
					_this.list = res.data.data.list;
					_this.count.allmis = allmis;
					_this.count.out_time = res.data.data.tongji.out_time;
					_this.count.do_in_time = res.data.data.tongji.do_in_time;
				},
				fail: ()=>{
					uni.showToast({
						icon: 'none',
						title: '加载失败'
					})
					uni.hideLoading();
				}
			})
		}
	}
}
</script>

<style scoped>
.container{
	height: 100vh;
}
.status_bar{
	width: 100%;
	height: var(--status-bar-height);
	background: #fff;
}
.body{
	background: #fff;
	height: calc(100vh - var(--status-bar-height) - 88upx);
}

.count{
	padding: 0 30upx;
	height: 80upx;
	line-height: 80upx;
}
.count view{
	font-weight: bold;
	font-weight: 32upx;
}
.count view:nth-child(2){
	color: #29B400;
}
.count view text,
.count view:nth-child(3){
	color: red;
}

.head .tabs .tab{
	position: relative;
}
.head .tabs .tab.active{
	color: #157FC2;
	position: relative;
}
.head .tabs .tab.active::after{
	content: '';
	width: 120%;
	height: 6upx;
	background: #157FC2;
	position: absolute;
	bottom: -10upx;
	left: -10%;
}
.head .tabs .tab view{
	width: 30upx;
	height: 30upx;
	color: #fff;
	font-size: 20upx;
	text-align: center;
	line-height: 30upx;
	border-radius: 50%;
	background: #FF6E03;
	position: absolute;
	top: -4upx;
	right: -20upx;
}
.scroll{
	width: 100%;
	padding: 0 20upx 20upx;
	box-sizing: border-box;
	height: calc(100vh - var(--status-bar-height) - 88upx - 80upx);
}
.scroll.full{
	height: calc(100vh - var(--status-bar-height) - 88upx);
}
.user{
	width: 90upx;
	height: 100upx;
	margin-right: 10upx;
}
.user.small{
	width: 70upx;
	height: 80upx;
	margin-right: 26upx;
}
.card{
	/* height: 240upx; */
	background: #fff;
	margin: 20upx 2upx 0;
	border-radius: 16upx;
	box-sizing: border-box;
	padding: 14upx 20upx 20upx;
	box-shadow: 0 0 6upx #CCC;
}
.card .title{
	margin-bottom: 6upx;
}
.card .right{
	width: 200upx;
	align-items: flex-end;
}
.card .right text{
	margin-right: 20upx;
}
.card .right text.uncheck{
	color: #FB7900;
}
.card .right text.outtime{
	color: red;
}
.card .left{
	width: calc(100% - 200upx);
}
.card .left view.name{
	text-indent: 16upx;
	position: relative;
}
.card .left view.name::before{
	content: '';
	width: 6upx;
	height: 26upx;
	background: #FF6E03;
	border-radius: 6upx;
	position: absolute;
	top: 12upx;
	left: 0;
}
.card .left .time{
	font-size: 26upx;
	line-height: 1.4;
}
.card .left .time text{
	color: #34CB02;
	margin: 0 10upx;
}
.card .left .time text.error{
	color: red;
}
.card .left .time text.grey{
	color: grey;
}
</style>
